<template>
		<div class="classificationList">
				<nav class="navbar clear">
						<div class="nav-item fl"><a href="javascript:;" @click='tabToggle("sales");listView()' v-bind:class="{active : (type == 'sales')}"><span>销量</span></a></div>
						<div class="nav-item fl"><a href="javascript:;" @click='tabToggle("news");listView()' v-bind:class="{active : (type == 'news')}"><span>新品</span></a></div>
						<div class="nav-item fl"><a href="javascript:;" @click='tabToggle("prices");listView()' v-bind:class="{active : (type == 'prices')}"><span>价格</span><div :class="[{exchange : exchange}, 'priceIcon']" @click="priceArrange()"><i class="up"></i><i class="down"></i></div></a></div>
				</nav>
				<div class="nav-container">
						<ul class="nav-container-list clear">
								<li class="productbar fl" v-for="item in productList">
										<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
										<img :src="item.imageUrl" class="product-img"/>
										<p class="product-name">{{item.goodsName}}</p>
										<p class="product-price">￥{{item.shopPrice}}</p>
										</router-link>
								</li>
						</ul>
						<ul class="nav-container-list clear" v-if="type == 'news'">
							<li class="productbar fl" v-for="item in productList">
								<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
									<img :src="item.imageUrl" class="product-img"/>
									<p class="product-name">{{item.goodsName}}</p>
									<p class="product-price">￥{{item.shopPrice}}</p>
								</router-link>
							</li>
						</ul>
						<ul class="nav-container-list clear" v-if="type == 'prices'">
							<li class="productbar fl" v-for="item in productList">
								<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
									<img :src="item.imageUrl" class="product-img"/>
									<p class="product-name">{{item.goodsName}}</p>
									<p class="product-price">￥{{item.shopPrice}}</p>
								</router-link>
							</li>
						</ul>
				</div>
		</div>
</template>
<script>
		import Vue from 'vue'
		export default {
				data () {
						return {
								categoryID:'',
								productContent: [],
								productList:[],
								type : 'sales',
								loading: true,
								pageCount:'',
								currentPage:'',
								exchange:false,
						}
				},
				created(){
					 this.categoryID=this.$route.query.id;
				},
				name: 'app',
				mounted:function () {
					this.$nextTick(function () {
						this.listView();
            window.addEventListener('scroll', this.loadMore);
					})
				},
				methods:{
						listView:function () {
							var _this = this;
							this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/goods/list/" + this.categoryID + "/" + this.type + "/1").then(function (res) {
								_this.productContent = res.body.content;
								_this.productList = _this.productContent.rows;
								_this.pageCount = _this.productContent.pageCount;
								_this.currentPage =_this.productContent.currentPage;
							});
						},
						tabToggle:function(tabText){
								this.type= tabText;
//                document.body.scrollTop = document.body.offsetTop
						},
          loadMore:function () {
            var _this= this;
            var scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            var conHeight = (document.documentElement.clientHeight)*(this.currentPage) - 100;
            if(scrolled > conHeight && this.currentPage < this.pageCount){
                _this.currentPage++;
              this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/goods/list/" + _this.categoryID + "/" + _this.type + "/"+_this.currentPage).then(function (res) {
                for(var i=0; i<res.body.content.rows.length; i++){
                  _this.productList.push(res.body.content.rows[i]);
                }
              });
            }
          },
						priceArrange:function () {
							this.exchange = !this.exchange;
						}
				}
		}
</script>
<style lang="scss">
.classificationList{
	width: 100%; background: #fff;
	.navbar{
			width:100%; height:0.7rem; position: fixed; left: 0; top: 0; border-bottom:0.02rem solid #f1f1f1; background:#fff;
			.nav-item{
					width:calc(100%/3);
					position:relative;
					a{display:block; width:100%; height:0.7rem;}
					span{display:block; width:0.58rem; height:0.68rem; margin:0 auto; font-size:0.28rem; line-height:0.7rem; text-align:center; color:#333;}
			}
			.priceIcon{
					width:0.12rem; position:absolute; top:0.23rem; right:0.7rem;
					.up{display:block; width: 0; height: 0; border-left: 0.06rem solid transparent; border-right: 0.06rem solid transparent; border-bottom: 0.1rem solid #aaa;}
					.down{display:block; margin-top:0.06rem; width: 0; height: 0; border-left: 0.06rem solid transparent; border-right: 0.06rem solid transparent; border-top: 0.1rem solid #ff365d;}
			}
      .exchange{
          .up{display:block; width: 0; height: 0; border-left: 0.06rem solid transparent; border-right: 0.06rem solid transparent; border-bottom: 0.1rem solid #ff365d;}
          .down{display:block; margin-top:0.06rem; width: 0; height: 0; border-left: 0.06rem solid transparent; border-right: 0.06rem solid transparent; border-top: 0.1rem solid #aaa;}
      }
			.active{
					span{border-bottom:0.02rem solid #ff365d; color:#ff365d;}
			}
	}
	.nav-container-list{
			width:100%;  padding:0.8rem 0.14rem 0;
			.productbar{
					width:3.3rem; height:5.4rem; margin:0.3rem 0.15rem 0 0.15rem; border:0.02rem solid #f1f1f1;
					a{
							display: block; width: 3.3rem; height: 5.4rem;
							.product-img{display:block; width:3.3rem; height:3.3rem;}
							.product-name{margin:0.3rem 0.3rem 0.44rem 0.3rem; width:2.7rem; height:0.8rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; font-size:0.22rem; text-align:left; line-height:0.4rem; color:#3e3e3e;}
							.product-price{margin:0 0.3rem; font-size:0.24rem; font-weight:bold; text-align:left; line-height:0.24rem; color:#ff365d;}
					}
			}
	}
}
</style>
